---
name: Button
route: /button
menu: 业务组件
---

import { useState } from 'react';
import { Playground, Props } from 'docz';
import Button from './button';
import './button.scss';

import Space from '../Space';
import '../Space/space.scss';

# Button

## 基本用法

<Playground>
  <Space>
    <Button>Default Button</Button>
    <Button type="primary">Primary Button</Button>
    <Button type="success">Success Button</Button>
    <Button type="warning">Warning Button</Button>
    <Button type="danger">Danger Button</Button>
    <Button type="link">Link Button</Button>
  </Space>
</Playground>

## 按钮尺寸

<Playground>
  <Space>
    <Button type="primary" size="sm">Small Button</Button>
    <Button type="primary" size="md">Middle Button</Button>
    <Button type="primary" size="lg">Large Button</Button>
  </Space>
</Playground>

## 禁用按钮

<Playground>
  <Space>
    <Button disabled>Disabled Button</Button>
    <Button type="primary" disabled>Disabled Button</Button>
    <Button type="link" disabled>Disabled Link Button</Button>
  </Space>
</Playground>

## block button

- 按钮会占据父元素100%的宽度

<Playground>
    <div style={{width: "200px"}}>
      <Button type="success" block>确认</Button>
    </div>
</Playground>

## 图标按钮(TODO)

<Playground>
  <Space>
    <Button icon={"+"}>Default Button</Button>
    <Button type="primary" icon={"+"}>Primary Button</Button>
    <Button type="link" icon={"+"}>Link Button</Button>
  </Space>
</Playground>

## loading状态

<Playground>
    {() => {
      const [loading, setLoading] = useState(false);
      const handleClick = () => {
        setLoading(true);
        setTimeout(() => {
          setLoading(false);
        }, 3000);
      }
      return (
        <Space>
          <Button type="default" loading>Button</Button>
          <Button type="primary" loading>Button</Button>
          <Button type="success" icon="+" loading={loading} onClick={handleClick}>Click</Button>
          <Button type="warning" loading>Button</Button>
          <Button type="danger" loading>Button</Button>
        </Space>
      )
    }}
</Playground>

## 参数API

|  属性   | 说明  | 类型 | 默认值 |
|  ---- | ---- | ----  | ----  |
| disabled  | 是否禁用按钮 |  boolean | false |
| size  | 按钮的大小 |  sm \| md \| lg | md |
| type | 按钮类型 | primary \| success \| danger \| warning \| default \| link | default |
| htmlType | 设置 ```button``` 原生的 ```type``` 值 | button \| submit \| reset | button |
| block | 将按钮宽度调整为父元素宽度的100% | boolean | false |
| loading | 设置按钮载入状态 | boolean | false |
| icon | 设置按钮的图标组件(TODO) | ReactNode | - |
| onClick | 点击按钮时的回调 | (event) => void | - |


